<template>
  <div class="box">
    <h3>标题</h3>
    <div style="padding-left: 10px;padding-right: 10px;">
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">
          <span style="color: red;">*</span>
          订单编号
        </lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 100%;">
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">
          <span style="color: red;">*</span>
          外商国别
        </lable>
        <div class="input_select" @click="goreginCountry">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">
          <span style="color: red;">*</span>
          订单日期
        </lable>
        <div class="input_select" @click="showHandle">
          <input
            type="text"
            style="height: 100%;width: 90%;"
            placeholder="选择订单日期"
            v-model="timeValue"
          >
        </div>
        <van-popup position="bottom" v-model="formShow">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            @confirm="onConfirm"
            @cancel="onCancel"
          />
        </van-popup>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">
          <span style="color: red;">*</span>
          交货日期
        </lable>
        <div class="input_select" @click="showDelivery">
          <input
            type="text"
            style="height: 100%;width: 90%;"
            placeholder="选择交货日期"
            v-model="goodsValue"
          >
        </div>
        <van-popup position="bottom" v-model="goodShow">
          <van-datetime-picker
            v-model="goodDate"
            type="date"
            @confirm="onGoodsConfirm"
            @cancel="onGoodsCancel"
          />
        </van-popup>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">
          <span style="color: red;">*</span>
          抵运国
        </lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">
          <span style="color: red;">*</span>
          订单币种
        </lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">报关地海关</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">起运港</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">目的港</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">收汇方式</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">贸易方式</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">价格条款</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">包装种类</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box">
        <lable style="margin-right: 10px;width: 80px">运输方式</lable>
        <div class="input_select">
          <input type="text" style="height: 100%;width: 90%;" placeholder="请选择">
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="input_box" style="margin-bottom:40px;">
        <lable style="margin-right: 10px;width: 80px">备注</lable>
        <div class="input_select" style="height:60px">
          <textarea style="height: 100%;width: 100%;"></textarea>
        </div>
      </div>
      <div class="input_box" style="margin-bottom:40px;">
        <lable style="margin-right: 10px;width: 80px">关联报关单</lable>
        <div class="input_select" style="height:60px;">
          <textarea style="height: 100%;width: 100%;"></textarea>
        </div>
      </div>
    </div>
    <button>提交在手订单</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValue: "",
      goodsValue: "",
      formShow: false,
      goodShow: false,
      currentDate: new Date(),
      goodDate: new Date(),
      newShow: false,
      data: [{ country: "中国", city: "杭州" }]
    };
  },
  methods: {
    //点击选择时间日期
    showHandle() {
      this.formShow = true;
    },
    showDelivery() {
      this.goodShow = true;
    },
    showNew() {
      this.newShow = true;
    },
    //点击确认选择时间
    onConfirm(value) {
      let that = this;
      that.timeValue =
        value.getFullYear() +
        "-" +
        (value.getMonth() + 1) +
        "-" +
        value.getDate();
      that.formShow = false;
    },
    onCancel() {
      let that = this;
      that.formShow = false;
    },
    onGoodsConfirm(value) {
      let that = this;
      that.goodsValue =
        value.getFullYear() +
        "-" +
        (value.getMonth() + 1) +
        "-" +
        value.getDate();
      that.goodShow = false;
    },
    onGoodsCancel() {
      let that = this;
      that.goodShow = false;
    },
    //获取外商国别数据
    goreginCountry() {
      console.log(this.data);
      // axios({
      //   methods: "post",
      //   url: "",
      //   data: {}
      // }).then(function(res) {
      //   console.log(res);
      // });
    }
  }
};
</script>

<style scoped>
.input_box {
  height: 40px;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.input_select {
  display: inline-block;
  border: 1px solid #dcdfe6;
  flex: 1;
}
input,
textarea {
  background: none;
  outline: none;
  border: 0px;
}
</style>
